(async function () {
  const id = location.search.substring(4);
  axios.defaults.baseURL = 'http://124.223.14.236:3001';
  const { data: { data } } = await axios.get('/api/recipeInfo/' + id)
  console.log(data);
  renderDetail(data);

  // 请求数据
  // axios({
  //   method: 'GET',
  //   url: '/api/recipeInfo/' + id,
  // }).then(function (result) {
  //   renderDetail(result.data.data);
  // });

  // 去除 json 中多余 \
  function pattern(a) {
    let newA = a.replaceAll('/', '');
    newA = JSON.parse(newA);
    return newA;
  }
  
  // 渲染数据
  function renderDetail(data) {
    let {
      author,
      context,
      description,
      img,
      raw_fu_list,
      raw_list,
      raw_tl_list,
      raw_type,
      title,
    } = data;
    // 姓名，菜名
    document.querySelector(
      '.title-box'
    ).innerHTML = `<h3>${title}</h3><p>${author}</p>`;
    // 图片，描述
    const reImg = 'http://124.223.14.236:3001' + '/public/' + img;
    document.querySelector('img.show-img').src = reImg;
    document.querySelector('blockquote').innerHTML = `
        <span
        class="txt_tart"></span>${description}<span
        class="txt_end">
      `;
    // 主料 list
    renderList(raw_list, 'raw_list');

    // 辅料
    renderList(raw_fu_list, 'raw_fu_list');

    // 调料
    renderList(raw_tl_list, 'raw_tl_list');

    // type
    renderList(raw_type, 'raw_type');

    // 做法步骤
    document.querySelector('#title').innerHTML = `${title}的做法步骤`;
    document.querySelector('#context').innerHTML = context;
  }

  // 调料函数
  function renderList(raw, domId) {
    let newraw = pattern(raw);
    document.querySelector(`#${domId}`).innerHTML = newraw
      .map((item) => {
        return `
          <li>
            <span class="category_s1">
                <a href="/YuanLiao/ZhongJinMianFen/" title="面粉的做法" target="_blank"><b>${item.name}</b></a>
            </span>
            <span class="category_s2">${item.num}</span>
          </li>
        `;
      })
      .join('');
  }
})();